<template>
  <!-- 布局 -->
  <div class="box">
    <!-- 版心 -->
    <div class="banner">
      <!-- 左边部分 -->

      <!-- 右边部分 -->
      <div class="box_right">
        您好,{{ users }}
        <div class="information">
          <div class="cont">
            <div class="cont1">
              <p class="cp1">个人信息</p>
            </div>
            <div class="cont2">
              <div class="cont_left">
                <p class="cp3">姓名</p>
                <input
                  type="text"
                  placeholder="请输入姓名"
                  class="inUse"
                  v-model="users"
                  name="userName"
                  @change="handleName"
                  @focus="handleFocus"
                />
                <span class="rcrt_name" ref="nameRef" v-show="name_isShow">
                </span>
                <div class="cont_flex">
                  <div>
                    <p class="cp4">性别</p>
                    <select class="inUse2" v-model="sex" name="sex" disabled>
                      <option
                        v-for="(item, index) in data1.sex"
                        :key="index"
                        :value="item"
                      >
                        {{ item }}
                      </option>
                    </select>
                  </div>
                  <div class="birth">
                    <P class="cp5">出生日期</P>
                    <select
                      @change="handleYear"
                      v-model="year"
                      disabled
                      name="year"
                    >
                      <option
                        v-for="(item, index) in arr1.years"
                        :key="index"
                        :value="item"
                      >
                        {{ item }}
                      </option>
                    </select>

                    <select
                      name="month"
                      v-model="month"
                      @change="handleMounth(month)"
                      disabled
                    >
                      <option
                        v-for="(item, index) in arr1.mounths"
                        :key="index"
                        :value="item"
                      >
                        {{ item }}
                      </option>
                    </select>

                    <select name="day" v-model="day" disabled>
                      <option
                        v-for="(item, index) in arr1.days"
                        :key="index"
                        :value="item"
                      >
                        {{ item }}
                      </option>
                    </select>
                  </div>
                </div>
                <div>
                  <p class="cp6">鞋码</p>
                  <select name="shoeSize" v-model="shoeSize" id="opt">
                    <option
                      v-for="(item, index) in data.arr"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                </div>
              </div>
              <div class="cont_right">
                <div>
                  <p class="cp3">手机</p>
                  <input
                    type="tel"
                    placeholder="请输入电话"
                    class="inUse"
                    v-model="tel"
                    name="telphone"
                    @change="handleTel"
                    disabled
                  />
                  <span ref="telRef" v-show="tel_isShow" class="rcrt"></span>
                </div>
                <div class="email">
                  <p class="cp33">邮箱</p>
                  <input
                    type="email"
                    placeholder="请输入邮箱"
                    class="inUse"
                    @change="handleEmail"
                    v-model="eMail"
                    disabled
                  />
                  <span
                    class="rcrt_email"
                    ref="eMailRef"
                    v-show="eMail_isShow"
                  ></span>
                </div>
              </div>
            </div>
            <div class="cont3">
              <button class="btn1" @click="handleSave">保存</button>
              <div class="errText" v-show="errText_isShow" ref="errTextRef"></div>
            </div>
          </div>
        </div>
        <!-- 设置 -->
        <div class="bag-bottom">
          <img src="../../public/images/user/bag.jpg" alt="" />
          <div class="texts">
            <p>来AIBU，一起爱步一下</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { $get, $post } from "../../request";
let account = localStorage.getItem("username");

//挂载后渲染用户信息
onMounted(() => {
  $get("/edit/render", { account })
    .then((backData) => {
      users.value = backData.data.name;
      tel.value = backData.data.tel;
      eMail.value = backData.data.email;
      sex.value = backData.data.sex;
      console.log(shoeSize.value);
      console.log(backData.data.shoeSize);
      shoeSize.value = backData.data.shoeSize;
      console.log(backData);
    })
    .catch(function (err) {
      console.log(err);
    });
});
// errText 
let errText_isShow = ref(false)
let errTextRef = ref("")

function handleFocus(){
    errText_isShow.value = false
}

// 点击保存发送请求
function handleSave() {
  handleName();
  handleTel();
  handleEmail();
  //   发送请求前判断格式是否正确
  if (
    name_isShow.value !== true &&
    eMail_isShow.value !== true &&
    tel_isShow !== true
  ) {
    $get("/edit/useredit", {
      name: users.value,
      shoeSize: shoeSize.value,
      account
    }).then((data) => {
        if(data.code===200){
            errText_isShow.value=true
            errTextRef.value.innerText=data.msg
            errTextRef.value.style.color="green"
        }else{
             errTextRef.value.innerText=data.msg
             errTextRef.value.style.color="red"
            errText_isShow.value=true
        }
    });
  } else {
    return;
  }
}
const data = reactive({
  arr: [28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44],
  userName: "",
});

//鞋码默认值
const shoeSize = ref(data.arr[5]);

//姓名验证
const users = ref("");
const nameRef = ref("");
let name_isShow = ref(true);
function handleName() {
  // 中文验证
  let reg = /^[\u4E00-\u9FA5]{2,6}$/;
  // 匹配空格
  let reg_ = /\s/i;
  // 空格验证
  if (reg_.test(users.value)) {
    nameRef.value.innerText = "姓名中不能出现空格";
    name_isShow.value = true;
  } else if (users.value == "") {
    nameRef.value.innerText = "真实姓名不能为空";
    name_isShow.value = true;
  } else if (users.value.length <= 6 && users.value.length >= 2) {
    if (reg.test(users.value)) {
      name_isShow.value = false;
    } else {
      nameRef.value.innerText = "姓名不合法 请输入中文";
      name_isShow.value = true;
    }
  } else if (users.value.length < 2) {
    nameRef.value.innerText = "姓名不能小于两位";
    name_isShow.value = true;
  } else if (users.value.length > 6) {
    nameRef.value.innerText = "姓名不能大于六位";
    name_isShow.value = true;
  } else {
    name_isShow.value = false;
  }
}

const data1 = reactive({
  sex: ["男", "女"],
});
//男女验证
let sex = ref(data1.sex[0]);
//手机号验证
const tel = ref("");
const telRef = ref("");
let tel_isShow = ref(false);
function handleTel() {
  let reg =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  if (tel.value == "") {
    telRef.value.innerText = "手机号不能为空，请输入手机号";
    tel_isShow.value = true;
  } else if (reg.test(tel.value)) {
    tel_isShow.value = false;
  } else {
    telRef.value.innerText = "手机号格式错误";
    tel_isShow.value = true;
  }
}

//出生日期验证

const arr1 = reactive({
  years: [
    1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999,
    2000, 2001, 2002, 2004, 2005, 2006, 2007, 2008,
  ],
  mounths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  days: [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
    22, 23, 24, 25, 26, 27, 28, 29, 31,
  ],
});

let years = ref(new Date().getFullYear() - 18);
let year = ref(years);
const month = ref(1);
const day = ref(1);
// 闰年的判断，
function handleYear() {
  if (year.value % 400 == 0 || (year.value % 4 == 0 && year.value % 100 != 0)) {
    arr.days.splice(28, arr.days.length, 29);
  } else {
    arr.days.splice(28, arr.days.length);
    if (month.value == 2 && day.value == 29) {
      day.value = 28;
    }
  }
}
// 月份和每月天数的逻辑
function handleMounth(item) {
  if (item == 2) {
    if (
      year.value % 400 == 0 ||
      (year.value % 4 == 0 && year.value % 100 != 0)
    ) {
      arr.days.splice(28, arr.days.length, 29);
    } else {
      arr.days.splice(28, arr.days.length);
    }
  } else {
    // 1-7月的判断
    if (item < 7) {
      if (item % 2 == 0) {
        arr.days.splice(28, arr.days.length, 29, 30);
      } else {
        arr.days.splice(28, arr.days.length, 29, 30, 31);
      }
    } else {
      if (item % 2 == 0) {
        arr.days.splice(28, arr.days.length, 29, 30, 31);
      } else {
        arr.days.splice(28, arr.days.length, 29, 30);
      }
    }
  }
  //当 月份的最大值没有 当前的日期时，改变当前的日期
  if (day.value > arr.days[arr.days.length - 1]) {
    day.value = arr.days[arr.days.length - 1];
  }
}

//邮箱验证
const eMail = ref("");
let eMail_isShow = ref(false);
const eMailRef = ref("");
function handleEmail() {
  if (eMail.value == "") {
    eMailRef.value.innerText = "邮箱不能为空 请重新输入";
    eMail_isShow.value = true;
  } else {
    let reg =
      /^[A-Za-z0-9\-_]+[A-Za-z0-9\.\-_]*[A-Za-z0-9\-_]+@[A-Za-z0-9]+[A-Za-z0-9\.\-_]*(\.[A-Za-z0-9\.\-_]+)*[A-Za-z0-9]+\.[A-Za-z0-9]+[A-Za-z0-9\.\-_]*[A-Za-z0-9]+$/;
    if (reg.test(eMail.value)) {
      eMail_isShow.value = false;
    } else {
      eMailRef.value.innerText = "邮箱格式错误 请重新输入";
      eMail_isShow.value = true;
    }
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}

.box {
  background-color: #f7f8fa;
}

.box_left {
  display: flex;
  flex-direction: column;
}

.box_left a {
  text-decoration: none;
  cursor: pointer;
  color: #000;
  width: 140px;
  margin-bottom: 20px;
}

.box_right {
  font-weight: 700;
  font-size: 24px;
  color: #616265;
}

.box_right .mt {
  margin-top: 10px;
  font-size: 20px;
  line-height: 20px;
}

.box_right div span {
  font-weight: lighter;
  margin-top: 15px;
}

.box_right .mt .img2 {
  margin-left: 15px;
}

.information {
  margin-top: 30px;
}

.cont {
  width: 1220px;
  height: 480px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  overflow: hidden;
}

.cont1 {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-left: 37px;
}

.cont2 {
  display: flex;
  justify-content: space-between;
}

.cp1 {
  color: #000;
  font-size: 24px;
}

.cp2 {
  color: #ccc;
  font-size: 24px;
  font-weight: 400;
  margin-right: 20px;
}

.cp3 {
  font-weight: lighter;
  color: #000;
  font-size: 16px;
}

.cp33 {
  font-weight: lighter;
  color: #000;
  font-size: 16px;
  margin-top: 24px;
}

.cp4 {
  font-weight: lighter;
  color: #000;
  font-size: 16px;
}

.cp5 {
  margin-left: 100px;
  font-weight: lighter;
  color: #000;
  font-size: 16px;
}

.cp6 {
  font-weight: lighter;
  color: #000;
  font-size: 16px;
  margin-top: 50px;
}

.cont_left {
  width: 580px;
  margin-top: 40px;
  margin-left: 40px;
}

.cont_right {
  width: 580px;
  margin-top: 40px;
}

.cont_flex {
  margin-top: 20px;
  display: flex;
}

.inUse {
  outline: none;
  border: none;
  height: 38px;
  border: 0;
  border-bottom: 1px solid #979797;
  width: 468px;
}
//性别下拉框判断
.inUse2 {
  width: 56px;
}
select {
  outline: none;
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #000;
}
//出生日期
.birth select {
  width: 80px;
  margin-right: 1rem;
  text-align: center;
  font-size: 16px;
}
.birth {
  margin-left: 120px;
  margin-top: 10px;
}
//验证手机号错误时报红
.rcrt {
  display: flex;
  left: 74%;
  top: 65%;
  color: red;
  font-size: 14px;
}
//验证姓名错误时报红
.rcrt_name {
  display: flex;
  left: 30%;
  top: 67%;
  color: red;
  font-size: 14px;
}
.inUse2 {
  outline: none;
  border: none;
  height: 38px;
  border: 0;
  border-bottom: 1px solid #979797;
  width: 75px;
  background-color: #efefef4d;
  padding-left: 10px;
}
//邮箱验证
.rcrt_email {
  display: flex;
  left: 40%;
  top: 67%;
  color: red;
  font-size: 14px;
}
//邮箱
.email {
  margin-top: 36px;
}
.inUse3 {
  outline: none;
  border: none;
  width: 68px;
  height: 38px;
  border: 0;
  border-bottom: 1px solid #979797;
  background-color: #efefef4d;
  padding-left: 10px;
  margin-right: 20px;
}

#opt {
  width: 140px;
  height: 38px;
  outline: none;
  border: none;
  border: 0;
  border-bottom: 1px solid #979797;
  background-color: #efefef4d;
}
.cont3{
    position: relative;
}
.cont3 .errText {
    position: absolute;
    top: calc(100% );
    left: 40px;
    color: red;
    font-size: 16px;
}
.btn1 {
  width: 200px;
  height: 40px;
  background: #000;
  color: white;
  margin-top: 30px;
  margin-left: 40px;
  cursor: pointer;
}

.btn2 {
  width: 200px;
  height: 40px;
  background: #000;
  color: white;
  margin-top: 30px;
  margin-left: 40px;
  cursor: pointer;
}

.sets {
  width: 1220px;
  height: 227px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin-top: 30px;
  overflow: hidden;
}

.sp {
  color: #000;
  margin-top: 30px;
  margin-left: 40px;
}

.sp2 {
  font-size: 14px;
  font-weight: lighter;
  color: #000;
  margin-left: 40px;
  margin-top: 40px;
}

.bag-bottom {
  width: 1220px;
  height: 378px;
  position: relative;
  margin-top: 20px;
}

.bag-bottom img {
  width: 1220px;
}

.texts {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.texts p {
  color: white;
  font-weight: lighter;
  font-size: 20px;
}

.banner2 {
  width: 1520px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.p11 {
  line-height: 18px;
  font-weight: 600;
  color: #000;
}

.p22 {
  color: #515151;
  margin-top: 8px;
}
</style>
